<template>
  <div>
    <van-nav-bar safe-area-inset-top placeholder :title="siteName" left-arrow fixed @click-left="onClickLeft" />
    <van-pull-refresh v-model="isLoading" :pulling-text="$t('PullingText')" :loosing-text="$t('PullingText')" :success-text="$t('refreshSuccee')" @refresh="onRefresh">
      <van-row class="black-box">
          <van-col span="12" class="col_l">
            <div class="homeBox_content">
              <div class="tit_2"></div>
              <div class="tit_1">{{$t('InverterPower')}}</div>
              <div class="tit_3">{{powerDatas.inverterPower | units('W',2)}}</div>
              <div class="tit_4">
                <span>{{$t('PVPower')}}</span>
                <p>{{powerDatas.pvPower | units('W',2)}}</p>
              </div>
              <div class="tit_4">
                <span>{{$t('GridPower')}}</span>
                <p>{{powerDatas.gridPower | units('W',2)}}</p>
              </div>
            </div>
          </van-col>
          <van-col span="12" class="col_r">
            <div class="homeBox_content">
              <div class="tit_2_1"></div>
              <div class="tit_1">{{$t('TodayYield')}}</div>
              <div class="tit_3">{{topDatas.dailyEnergy | units('kWh',2)}}</div>
              <div class="tit_4">
                <span>{{$t('MonthlyYield')}}</span>
                <p>{{topDatas.monthlyEnergy | units('kWh',2)}}</p>
              </div>
              <div class="tit_4">
                <span>{{$t('TotalYield')}}</span>
                <p>{{topDatas.totalEnergy | units('kWh',2)}}</p>
              </div>
            </div>
          </van-col>
      </van-row>
      <div class="box_ios" v-if="isIOS"></div>
      <div class="box_android" v-if="!isIOS"></div>
      <div class="myyuanpan">
        <div class="myyuanpan_text_1_t">{{$t('Solar')}}</div>
        <div class="myyuanpan_text_1_b">{{Math.abs(pv) | numFilter(1,'W')}}</div>
        <div class="myyuanpan_text_2_t">{{$t('loadGenerator')}}</div>
        <div class="myyuanpan_text_2_b">{{Math.abs(loadPower) | numFilter(1,'W')}}</div>
        <div class="myyuanpan_text_3_t">{{$t('Feedin')}}</div>
        <div class="myyuanpan_text_3_b">{{Math.abs(feedin) | numFilter(1,'W')}}</div>
        <div class="myyuanpan_text_4_t">{{$t('Battery')}}</div>
        <div class="myyuanpan_text_4_b">{{Math.abs(battery) | numFilter(1,'%')}}</div>
        <div class="myyuanpan_text_4_b_1">{{Math.abs(batteryPower) | numFilter(1,'W')}}</div>
        <div class="myyuanpan_text_5_b">{{Math.abs(grid) | numFilter(1,'W')}}</div>

        <div class="Z1" v-if="flow[0]"><img src="../../../assets/Z1.gif" alt=""/></div>
        <div class="Z2" v-if="flow[1]"><img src="../../../assets/Z2.gif" alt=""/></div>
        <div class="F2" v-if="flow[2]"><img src="../../../assets/F2.gif" alt=""/></div>
        <div class="Z3" v-if="flow[3]"><img src="../../../assets/Z3.gif" alt=""/></div>
        <div class="F3" v-if="flow[4]"><img src="../../../assets/F3.gif" alt=""/></div>
        <div class="Z4" v-if="flow[5]"><img src="../../../assets/Z4.gif" alt=""/></div>
        <div class="F4" v-if="flow[6]"><img src="../../../assets/Z2.gif" alt=""/></div>
        <div class="Z5" v-if="flow[7]"><img src="../../../assets/Z5.gif" alt=""/></div>
        <div class="F5" v-if="flow[8]"><img src="../../../assets/Z5.gif" alt=""/></div>

        <router-link :to="{path:'/agentsolar'}" class="click1"></router-link>
        <router-link :to="{path:'/agentbattery'}" class="click2"></router-link>
        <router-link :to="{path:'/agentsiteinvlist'}" class="click3"></router-link>
        <router-link :to="{path:'/agentfeedin'}" class="click4"></router-link>
        <router-link :to="{path:'/agentload'}" class="click5"></router-link>
      </div>
      <div class='echarts-goto-box' @click='gotoSiteDetail'>
        <div class="icon_1"><van-icon name="chart-trending-o" /></div>
        <div class="txt">{{$t('site.graphics')}}</div>
        <div class="icon_2"><van-icon name="arrow" /></div>
      </div>
      <van-row class="bottomBox">
          <van-col span="12" class="col_l">
            <div class="homeBox_content">
              <div class="tit_1">{{$t('Reduction')}}</div>
              <div class="tit_2_sitedetail"></div>
              <div class="tit_3_sitedetail">{{topDatas.CO2Reduction | numFilter(1,'kg')}}</div>
            </div>
          </van-col>
          <van-col span="12" class="col_r">
            <div class="homeBox_content">
              <div class="tit_1">{{$t('Electricity')}}</div>
              <div class="tit_2_1_sitedetail"></div>
              <div class="tit_3_sitedetail">{{Co2Datas.value}}{{Co2Datas.unit}}</div>
              <van-icon style="display:none" class="sale" color="#B4B4B4" size="30" name="arrow" />
            </div>
          </van-col>
      </van-row>
    </van-pull-refresh>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data(){
    return {
      isIOS:!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
      siteName:localStorage.getItem('siteName'),
      tokenId:localStorage.getItem('tokenId'),
      siteId:localStorage.getItem('siteId'),
      isLoading:false,
      topDatas:'',
      powerDatas:'',
      Co2Datas:'',
      pv:'',
      loadPower:'',
      feedin:'',
      battery:'',
      batteryPower:'',
      grid:'',
      flow:[],
      siteArr:[],
      fifteenRefresh:null
    }
  },
  methods: {
    onClickLeft(){
      if(sessionStorage.getItem('setFrom')=='/agentHome/user'){
        this.$router.push({path:'/agentsitelist'});
      }else{
        this.$router.push({path:'/agentHome/sites'});
      }
    },
    gotoSiteDetail(){
      this.$router.push({path:'/agentsitedetailChart'});
    },
    goElectricity(){
      this.$router.push({path:'/electricity'});
    },
    async siteTopData(){
      let data=await this.API.siteTopData(localStorage.getItem('domain'),{
        'tokenId':this.tokenId,
        'siteId':this.siteId,
        'currentTime':moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
        });
      if(data.success){
        this.topDatas=data.result;
      }
    },
    async sitePower(){
      let data=await this.API.homePower(localStorage.getItem('domain'),{
        'tokenId':this.tokenId,
        'siteId':this.siteId,
        'currentTime':moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
        });
      if(data.success){
        this.powerDatas=data.result;
      }
    },
    async siteEnergySave(){
      let data=await this.API.siteEnergySave(localStorage.getItem('domain'),{
        'tokenId':this.tokenId,
        'siteId':this.siteId
        });
      if(data.success){
        this.Co2Datas=this.convertUnit(data.result.price,data.result.currency);
      }
    },
    convertUnit(value,unitType){
      value=value||0;//设置value默认值
      value=Number(value);//value转换成number类型，防止toFixed报错
      if(isNaN(value)){
        return {value:'-',unit:''};
      }else{
        return {value:value.toFixed(2),unit:unitType};
      }
    },
    //流动图
    async getFlowChart(){
      this.comm.loadingShow();
      let res = await this.API.getFlowChart(localStorage.getItem('domain'),{
        'tokenId':this.tokenId,
        'siteId':this.siteId
      });
      if(res.success&&res.result.length!=0){
        let dataVal = JSON.parse(res.result[0]);
        this.pv=((dataVal.powerdc1||0)+(dataVal.powerdc2||0)+(dataVal.powerdc3||0)+(dataVal.powerdc4||0));
        this.feedin=dataVal.feedinpower||0;
        this.grid=dataVal.gridpower||0;
        this.loadPower=this.grid-this.feedin;
        this.batteryPower=dataVal.batPower1||0;
        //判断是否接电表
        if(this.feedin!=0 || (dataVal.feedinenergy!=0&&dataVal.feedinenergy!=null) || (dataVal.consumeenergy!=0&&dataVal.consumeenergy!=null)){
          this.isMeter=true;
        }else{
          this.isMeter=false;
        }
        //获取电池信息
        let datas = await this.API.getSiteBatterys(localStorage.getItem('domain'),{
          'tokenId':this.tokenId,
          'siteId':this.siteId
        });
        this.battery=datas.avgSoc||0;
        let batFlag=0;
        if(datas.batteryState==0){
          batFlag=-1;
        }else if(datas.batteryState==1){
          batFlag=1;
        }else{
          batFlag=0;
        }
        this.flow=this.comm.siteFlowChar(this.feedin,this.grid,this.pv,batFlag,this.loadPower,this.isMeter);
      }
    },
    onRefresh(){
      this.isLoading=false;
      this.siteTopData();
      this.sitePower();
      this.siteEnergySave();
      this.getFlowChart();
    },
  },
  mounted(){
    this.siteTopData();
    this.sitePower();
    this.siteEnergySave();
    this.getFlowChart();
    this.fifteenRefresh=setInterval(()=>{
      this.siteTopData();
      this.sitePower();
      this.siteEnergySave();
      this.getFlowChart();
    },900000);
  },
  destroyed(){
    clearInterval(this.fifteenRefresh);
    this.fifteenRefresh=null;
  }
}
</script>

<style scoped lang="less">

.scllor-box-header{
  height: calc(100% - 50px);
  overflow-y: auto;
  .active{
    border-color:orange;
  }
}
.addSiteBox{
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 50px;
  width: 100%;
  font-size: 38px;
  background: #e6e6e6;
  .icons{
    margin-top: 6px;
    color: #595758;
  }
}
.van-hairline--bottom::after{
  border: none;
}
.siteBox{
  margin-bottom: 15px;
  width: 100%;
  background: #ffffff;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  font-size: 13px;
}
.siteTitBox{
  width: 100%;
  height: 35px;
  border-bottom: 1px dotted #e2e2e2;
}
.siteTit_l{
  float: left;
  height: 35px;
  line-height: 35px;
  color: #595758;
  font-weight: bolder;
  font-size: 16px;
  margin-left: 15px;
 }
 .default{
   float: left;
   margin: 7px 0 0 10px;
   background: #F6A900;
   color: #fff;
   font-size: 12px;
   padding: 3px;
   border-radius: 10px;
 }
.siteContentBox{
 padding: 0 15px;
}
.siteContentList{
  height: 30px;
  line-height: 30px;
  width: 100%;
}
.siteContentList_l{
  float: left;
  color: #B6B6B6;
}
.siteContentList_r{
  float: right;
  color: #444444;
}
.box_ios{
  width: 100%;
  height: 150px;
}
.box_android{
  width: 100%;
  height: 125px;
}
.black-box{
  width: 100%;
  height: 70px;
  background: #3B3D4E;
  padding-top: 5px;
}
.homeBox_content{
  background: #FFFFFF;
  border-radius: 6px;
  padding: 5px 8px;
  box-shadow: 1px 3px 6px #bbbbbb;
  text-align: left;
  position: relative;
  .tit_1{
    width: 100%;
    color: #585858;
    height: 25px;
    font-size: 15px;
  }
  .tit_2{
    width: 100%;
    height: 23px;
    margin-bottom: 3px;
    background: url("../../../assets/home1.png") no-repeat left / 23px;
  }
  .tit_2_sitedetail{
    width: 100%;
    height: 23px;
    background: url("../../../assets/site1.png") no-repeat left / 23px;
  }
  .tit_2_1{
    width: 100%;
    height: 23px;
    margin-bottom: 3px;
    background: url("../../../assets/home2.png") no-repeat left / 23px;
  }
  .tit_2_1_sitedetail{
    width: 100%;
    height: 23px;
    background: url("../../../assets/site2.png") no-repeat left / 23px;
  }
  .tit_3{
    width: 100%;
    border-bottom: 1px solid #d8d8d8;
    color: #595856;
    font-weight: bolder;
    font-size: 18px;
    padding: 4px 0;
  }
  .tit_3_sitedetail{
    width: 100%;
    color: #595856;
    font-weight: bolder;
    font-size: 20px;
    padding-top: 4px;
  }
  .tit_4{
    width: 100%;
    margin-top: 4px;
    color: #585858;
    span{
      font-size: 14px;
    }
    p{
      font-size: 16px;
      padding-top: 4px;
      margin: 0;
    }
  }
  .sale{
    position: absolute;
    top:43px;
    right: 2px;
  }
}
.col_l{
  padding:0 8px;
}
.col_r{
  padding-right:8px;
}
.myyuanpan{
  position: relative;
  color: #7A7A7A;
  width: 295px;
  height: 330px;
  margin: 0 auto 38px;
  background: url("../../../assets/remote.png") no-repeat center;
  background-size: 100% 100%;
}
.myyuanpan_text_1_t{
  position: absolute;
  width:95px;
  top:92px;
  text-align: center;
  font-size: 14px;
}
.myyuanpan_text_1_b{
  width:95px;
  position: absolute;
  top:61px;
  text-align: center;
  color:#EF8200;
  font-size: 12px;
}
.myyuanpan_text_2_t{
  position: absolute;
  width:120px;
  top:332px;
  right:-11px;
  text-align: center;
  font-size: 14px;
}
.myyuanpan_text_2_b{
  position: absolute;
  width:95px;
  top:300px;
  right:0px;
  text-align: center;
  color:#EF8200;
  font-size: 12px;
}
.myyuanpan_text_3_t{
  width:100px;
  position: absolute;
  top:332px;
  text-align: center;
  font-size: 14px;
}
.myyuanpan_text_3_b{
  width:95px;
  position: absolute;
  top:300px;
  text-align: center;
  color:#EF8200;
  font-size: 12px;
}
.myyuanpan_text_4_t{
  position: absolute;
  width:95px;
  top:92px;
  right:0px;
  text-align: center;
  font-size: 14px;
}
.myyuanpan_text_4_b{
  position: absolute;
  width:95px;
  top:25px;
  right:0px;
  text-align: center;
  color:#EF8200;
  font-size: 12px;
}
.myyuanpan_text_4_b_1{
  position: absolute;
  width:95px;
  top:61px;
  right:0px;
  text-align: center;
  color:#EF8200;
  font-size: 12px;
}
.myyuanpan_text_5_b{
  position: absolute;
  width:95px;
  top:180px;
  left:100px;
  text-align: center;
  color:#EF8200;
  font-size: 12px;
}
.Z1 img,.Z2 img,.F2 img,.Z3 img,.F3 img,.Z4 img,.F4 img,.Z5 img,.F5 img{
  width: 295px;
  height: 330px;
}
.Z1{
  position: absolute;
  width: 295px;
  height: 330px;
}
.Z2{
  position: absolute;
  width: 295px;
  height: 330px;
}
.F2{
  position: absolute;
  width: 295px;
  height: 330px;
}
.Z3{
  position: absolute;
  width: 295px;
  height: 330px;
}
.F3{
  position: absolute;
  width: 295px;
  height: 330px;
}
.Z4{
  position: absolute;
  width: 295px;
  height: 330px;
}
.F4{
  position: absolute;
  width: 295px;
  height: 330px;
  transform: rotateX(-180deg);
}
.Z5{
  position: absolute;
  width: 295px;
  height: 330px;
}
.F5{
  position: absolute;
  width: 295px;
  height: 330px;
  transform: rotateY(180deg);
}
.click1{
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 95px;
  height: 95px;
}
.click2{
  position:absolute;
  display: block;
  top: 0; right: 0;
  width: 95px;
  height: 95px;
}
.click3{
  position: absolute;
  display: block;
  top: 124px;
  right: 98px;
  width: 95px;
  height: 82px;
}
.click4{
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 95px;
  height: 95px;
}
.click5{
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  width: 95px;
  height: 95px;
}
.echarts-goto-box{
  width: 200px;
  height: 34px;
  margin: 0 auto;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  color: #8c8879;
  font-size: 16px;
  background: #FDD100;
  margin-bottom: 10px;
  .icon_1{
    font-size: 24px;
    margin: 4px 4px 0 0;
  }
  .txt{
    font-size: 18px;
    height: 33px;
    line-height: 33px;
  }
  .icon_2{
    font-size: 20px;
    margin: 6px 0 0 20px;
  }
}
.bottomBox{
  padding-bottom: 8px;
  margin-top: 25px;
}
</style>
